<template>
    <el-dialog :modal="true"
               :title="title"
               :append-to-body="true"
               v-model="visible"
               :fullscreen="ifullscreen"
               :class="ifullscreen ? fullDialog : dialog"
               :style="ifullscreen ? emptyStyle : dialogStyle"
               :top="top"
               :width="ifullscreen ? orignalWidth : width"
               :draggable="draggable"
               :close-on-click-modal="closeOnClickModal"
               :destroy-on-close="destroyOnClose"
               :before-close="handleBeforeClose"
               @open="open"
               @opened="opened"
               @close="close"
               @closed="closed">
        <template #header>
            <slot name="header" :title="title">
                <div class="avue-crud__dialog__header" style="min-height: 24px">
                    <span class="el-dialog__title">{{title}}</span>
                    <div class="avue-crud__dialog__menu" @click="handleFullScreen">
                        <i class="el-icon el-dialog__close">
                            <FullScreen/>
                        </i>
                    </div>
                </div>
            </slot>
        </template>
        <div style="max-height: 80vh; position: relative">
            <div :class="ifullscreen ? bodyCss : autoTable" :style="bodyStyle">
                <slot></slot>
            </div>
        </div>
        <template #footer>
            <div class="avue-dialog__footer avue-dialog__footer--right" style="z-index:10">
                <div style="width: 100%; text-align: left">
                    <slot name="footerContent">
                        <!--<div style="margin-bottom: 30px;">1-->
                        <!--</div>-->
                    </slot>
                </div>
                <slot name="footerButton">
                    <!--<el-button type="primary" icon="el-icon-plus">新增</el-button>-->
                    <!--<el-button type="primary" icon="el-icon-circle-check">修改</el-button>-->
                    <el-button icon="el-icon-circle-close" @click="handleClose()">关闭</el-button>
                </slot>
            </div>
        </template>
    </el-dialog>
</template>

<script>

    export default {
        name: "modal",
        emits: ["before-close", "modalOpen", "modalOpened", "modalClose", "modalClosed","handleFullScreen"],
        props: {
            // 标题
            title: {
                type: String,
                default: ""
            },
            // body的样式
            bodyStyle: {
                type: Object,
                default: () => {
                    return {paddingBottom: '10px'}
                }
            },
            // 弹窗距离顶部的距离，默认偏移4%
            top: {
                type: String,
                default: "4%"
            },
            // 宽度
            width: {
                type: String,
                default: "60%"
            },
            // 弹窗关闭的确认
            isCloseConfirm: {
                type: Boolean,
                default: true
            },
            // 全屏
            fullscreen: {
                type: Boolean,
                default: false
            },
            // 是否可拖拽
            draggable: {
                type: Boolean,
                default: false
            },
            // 关闭时是否可销毁
            destroyOnClose: {
                type: Boolean,
                default: true
            },
            // 是否可以通过点击 modal 关闭 Dialog
            closeOnClickModal: {
                type: Boolean,
                default: true
            },
            // 关闭前的事件
            beforeClose: {
                type: Function,
                default: null
            }
        },
        data() {
            return {
                orignalWidth:"100%",
                oldWidth:"",
                visible: false,
                ifullscreen: false,
                autoTable:'auto-table',
                bodyCss:'body',
                dialog:'dialog avue-dialog avue-dialog--top auto-height',
                fullDialog: 'dialog avue-dialog avue-dialog--top',
                dialogStyle:'height: 85vh !important;',
                emptyStyle:'',
            }
        },
        watch: {
            // width: {
            //     handler(val) {
            //         this.orignalWidth = val;
            //     },
            //     immediate: true
            // }
        },
        methods: {
            show() {
                this.ifullscreen = this.fullscreen
                this.visible = true;
            },
            hide() {
                this.visible = false;
            },
            isShow() {
                return this.visible;
            },
            closeTip() {
                if (this.isCloseConfirm) {
                    return this.$confirm("是否确定关闭?", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                } else {
                    return false
                }
            },
            done() {
                this.visible = false;
            },
            handleClose() {
                this.handleBeforeClose(this.done)
            },
            handleBeforeClose(done) {
                if (this.beforeClose && typeof this.beforeClose === "function") {
                    this.beforeClose(done);
                } else {
                    const closeTip = this.closeTip();
                    if (closeTip === false) {
                        if (done) {
                            done()
                        }
                    } else {
                        closeTip.then(() => {
                            if (done) {
                                done()
                            }
                        })
                    }
                }
            },
            /**
             * 打开之前
             */
            open() {
                this.$emit("modalOpen");
            },
            /**
             * 打开完成
             */
            opened() {
                this.$emit("modalOpened");
            },
            /**
             * 关闭
             */
            close() {
                this.hide();
                this.$emit("modalClose");
            },
            /**
             * 关闭完成
             */
            closed() {
                this.$emit("modalClosed");
            },
            handleFullScreen() {
                this.ifullscreen = !this.ifullscreen;
                this.$emit("handleFullScreen");
            }
        }
    }
</script>

<style lang="scss" scoped>
    .dialog {
        :deep(.el-dialog__footer) {
            border-top: 1px solid #EBEEF5 !important;
        }
        :deep(.el-dialog__body) {
            margin-bottom: 0px !important;
        }
    }
    .auto-height {
        /*:deep(.avue-dialog) {*/
            height: 80vh !important;
        /*}*/
    }
    .body {
        /*padding: 0px 20px;*/
        :deep(.el-table--default) {
            height:calc(100vh - 400px) !important;
        }
        :deep(.el-table__inner-wrapper) {
            height:calc(100vh - 400px) !important;
        }
    }
    .auto-table {
        :deep(.el-table--default) {
            height:calc(80vh - 300px) !important;
        }
        :deep(.el-table__inner-wrapper) {
            height:calc(80vh - 300px) !important;
        }
    }

    .footer {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0px;
        width: 100%;
        background: white;
        border-top: 1px solid #EBEEF5 !important;
        z-index: 999;
    }

</style>